<template>
  <v-touch class="indexIcon" :style="iconStyle" @tap="iconTap" @panstart="touchStart" @panmove="touchMove"
    @panend="touchEnd">
    <img v-if="indexIcon.type!=='scene'" :src="indexIcon.icon" />
    <div class="scene" :style="sceneStyle" v-if="indexIcon.type==='scene'">
    </div>
  </v-touch>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
export default {
  props: ["n", "indexIcon"],
  data() {
    return {
      y: 0,
      x: 0,
      moveX: 0,
      moveY: 0
    }
  },
  mounted() {
  },
  computed: {
    //卡样式
    iconStyle() {
      return {
        left: 13 + 16 * this.n + "vh",
        transform: "translate(" + this.moveX + "px," + this.moveY + "px)"
      }
    },
    sceneStyle() {
      return {
        background: "url(" + this.indexIcon.icon + ") 0 0/100% 100%"
      }
    },
    ...mapGetters("packStatus", {
      packCard: "getPackCard"
    }),
    ...mapGetters("produceStatus", {
      produce: "getProduce",
      current: "getProduceCurrent"
    })
  },
  methods: {
    //卡牌点击
    iconTap: function () {
      switch (this.indexIcon.type) {
        case "imagery":
          this.putMusic()
          const imagery = JSON.parse(JSON.stringify(this.indexIcon.content))
          // 设置我的世界意象id 如果没有意象则id为1 如果有取id最大值+1
          imagery.produceEryId = this.produce.content[this.current].imagery.length > 0 ? this.MaxParam(this.produce.content[this.current].imagery, 'produceEryId') + 1 : 1
          imagery.leftInWorld = (this.mainWidth / 2 - parseFloat(imagery.widthInWorld) / 100 * this.mainWidth / 2) / this.mainWidth * 100 + "%"
          imagery.topInWorld = (this.mainHeight / 2 - parseFloat(imagery.heightInWorld) / 100 * this.mainHeight / 2) / this.mainHeight * 100 + "%"
          //保存
          setTimeout(() => {
            this.deletePack(this.indexIcon.packId)
            this.insertProduceImagery(imagery)
          }, 0)
          break
        case "role":
          this.putMusic()
          const role = JSON.parse(JSON.stringify(this.indexIcon.content))
          role.produceRoleId = this.produce.content[this.current].role.length > 0 ? this.MaxParam(this.produce.content[this.current].role, 'produceRoleId') + 1 : 1
          role.leftInWorld = (this.mainWidth / 2 - parseFloat(role.width) / 100 * this.mainWidth / 2) / this.mainWidth * 100 + "%"
          role.topInWorld = (this.mainHeight / 2 - parseFloat(role.height) / 100 * this.mainHeight / 2) / this.mainHeight * 100 + "%"
          //保存
          setTimeout(() => {
            this.deletePack(this.indexIcon.packId)
            this.insertProduceRole(role)
          }, 0)
          break
        default:
          this.insertScene()
      }
    },
    //记录滑动开始位置
    touchStart: function (event) {
      this.y = event.center.y
      this.x = event.center.x
    },
    //滑动过程改变icon的位置
    touchMove: function (event) {
      if (event.center.y - this.y < -10) {
        this.moveX = event.center.x - this.x
        this.moveY = event.center.y - this.y
      }
    },
    //滑动结束
    touchEnd: function (event) {
      if (event.center.y - this.y < -10) {
        switch (this.indexIcon.type) {
          case "imagery":
            this.insertImagery(event)
            break
          case "role":
            this.insertRole(event)
            break
          default:
            this.insertScene()
        }
      }
      this.moveX = 0
      this.moveY = 0
    },
    //新增场景意象
    insertImagery: function (event) {
      this.putMusic()
      const imagery = JSON.parse(JSON.stringify(this.indexIcon.content))
      // 设置我的世界意象id 如果没有意象则id为1 如果有取id最大值+1
      imagery.produceEryId = this.produce.content[this.current].imagery.length > 0 ? this.MaxParam(this.produce.content[this.current].imagery, 'produceEryId') + 1 : 1
      imagery.leftInWorld = ((this.mainWidth - this.windowWidth) / 2 + event.center.x) / this.mainWidth * 100 - parseFloat(imagery.widthInWorld) / 2 + "%"
      imagery.topInWorld = ((this.mainHeight - this.windowHeight) / 2 + event.center.y) / this.mainHeight * 100 - parseFloat(imagery.heightInWorld) / 2 + "%"
      //保存
      setTimeout(() => {
        this.deletePack(this.indexIcon.packId)
        this.insertProduceImagery(imagery)
      }, 0)
    },
    //新增场景角色
    insertRole: function (event) {
      this.putMusic()
      const role = JSON.parse(JSON.stringify(this.indexIcon.content))
      role.produceRoleId = this.produce.content[this.current].role.length > 0 ? this.MaxParam(this.produce.content[this.current].role, 'produceRoleId') + 1 : 1
      role.leftInWorld = ((this.mainWidth - this.windowWidth) / 2 + event.center.x) / this.mainWidth * 100 - parseFloat(role.width) / 2 + "%"
      role.topInWorld = ((this.mainHeight - this.windowHeight) / 2 + event.center.y) / this.mainHeight * 100 - parseFloat(role.height) / 2 + "%"
      //保存
      setTimeout(() => {
        this.deletePack(this.indexIcon.packId)
        this.insertProduceRole(role)
      }, 0)
    },
    //替换当前场景 默认场景不新增
    insertScene: function () {
      this.sucMusic()
      this.deletePack(this.indexIcon.packId)
      if (this.produce.content[this.current].scene) {
        const scene = {
          type: "scene",
          icon: this.produce.content[this.current].scene,
          content: {}
        }
        this.insertPack(scene)
      }
      this.produce.content[this.current].scene = this.indexIcon.icon
    },
    ...mapActions("packStatus", ["deletePack", "insertPack"]),
    ...mapActions("produceStatus", ["insertProduceImagery", "insertProduceRole"]),
  },
}
</script>

<style scoped lang='stylus'>
.indexIcon
  $coord('WHLT', 13vh, 13vh, 15vh, 1vh)
  box-shadow 1px 1px 1px rgba(0, 0, 0, 0.2)
  border-radius 50%
  background white
  $alignCenter()
  .scene
    width 8vh
    height 7.5vh
    border-radius 3.5vh
  img
    max-width 70%
    height 70%
    border-radius 0.2rem
</style>